<template>
    <div class="history">
        <van-nav-bar
            title="历史"
            left-arrow
            @click-left="onClickLeft"
        />

        <div class="history">
            <history v-for="(item,i) in lishi" :key="i" :id='item.id' :zhangId="item.zhangId" />
        </div>

        <div class="btn" v-show="isShow">
            <div class="login">请先登录</div>
        </div>
        <div class="btn" v-show="zhui1">
            <div class="login">暂未加入追漫</div>
        </div>
    </div>
</template>

<script>
import history from '../components/history.vue'
    export default {
        name:"History",
        data(){
            return{
                lishi:[],
                isShow:false,
                zhui1:false
            }
        },
        created(){
            let str = document.cookie.split(';')
            let obj = {}
            str.forEach(v => {
                obj[v.split('=')[0].trim()] = v.split('=')[1]
            });
            if (obj.login!='true') {
                this.isShow = true
            }else{
                let data = JSON.parse(localStorage.getItem("user"));
                if(data != null){
                    for (let i = 0; i < data.length; i++) {
                        if (obj.phone == data[i].phone) {
                            this.lishi = data[i].lishi
                        }
                    }
                    if(this.lishi.length===0){
                        this.zhui1 = true
                    }
                }else{
                    this.isShow = true
                }

            }
        },
        components:{
            history
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            }
        }
    }
</script>

<style lang="less" scoped>
.btn{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    .login{
        width: 35%;
        padding: 8px 0px;
        background-color: rgba(44, 44, 252, 0.992);
        border-radius: 15px;
        text-align: center;
        color: #fff;
        margin: 0 auto;
    }
    
}
.history{
    padding: 10px;
}
    // .history{
    //     padding: 10px;
    //     .history-container{
    //         display: flex;
    //         width: 100%;
    //         .history-img{
    //             height: 110px;
    //             border-radius: 5px;
    //             overflow: hidden;
    //             > img {
    //                 height: 100%;
    //                 display: block;
    //             }
    //         }
    //         .history-title{
    //             flex: 1;
    //             padding-left: 15px;
    //             display: flex;
    //             flex-direction: column;
    //             justify-content: space-between;
    //             .title-top{
    //                 font-weight: bold;
    //                 font-size: 15px;
    //             }
    //         }
    //         .history-btn{
    //             margin-left: auto;
    //             display: flex;
    //             align-items: center;
    //             padding-right: 5px;
    //             .btn-name{
    //                 padding: 5px 20px;
    //                 background-color: #32AAFF;
    //                 border-radius: 15px;
    //             }
                
    //         }
    //     }
    // }
</style>